<template>
	<!-- 试卷笔记详情 -->
	<view class="cs-detl-x">
		<view class="cs-detl">
			<!-- <view class="cs-detl-tc">
				<input class="tc-input" type="text" v-model="noteText"/>
			</view> -->
			<view class="cs-detl-editor-x">
				<view class='toolbar' @tap="format">
					<view>
						<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont iconziti icon_caozuo"
						 data-name="backgroundColor" data-value="#00ff00"></view>
					</view>
					<view>
						<view class="iconfont iconduigou1 icon_caozuo" data-name="list" data-value="check"></view>
					</view>
					<view>
						<view class="iconfont iconshangyibu icon_caozuo" @tap="undo"></view>
					</view>
					<view>
						<view class="iconfont iconxiayibu icon_caozuo" @tap="redo"></view>
					</view>
					<!-- <view>
						<view class="iconfont icontupian icon_caozuo" @tap="insertImage"></view>
					</view> -->
					<!-- 手/笔 -->
					<!-- <view>
						<view class="iconfont iconshouxieqianpi icon_caozuo" @tap="clickOpen"></view>
					</view> -->
				</view>
				<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize @ready="onEditorReady">
				</editor>
			</view>
			<!-- 手/笔 和草稿 -->
			<v-open v-if='isOpen' @changeOpen='changeOpen' :is_top='false'></v-open>
			<v-draw v-if='isDraw' @clickDraw='clickDraw'></v-draw>
		</view>
	</view>
</template>

<script>
	import open from './components/Base-open'
	import draw from './components/Base-draw'
	import api from '@/common/group-http/notehttp.js'
	export default {
		components: {
			vOpen: open,
			vDraw: draw
		},

		data() {
			return {

				detailData: {}, // 笔记详情数据
				iconArr: [ // 工具数组
					{
						icon: 'iconziti',
						title: '字体'
					},
					{
						icon: 'iconduigou1',
						title: '对勾'
					},
					{
						icon: 'icontupian',
						title: '图片'
					},
					{
						icon: 'iconyuyin1',
						title: '语音'
					},
					{
						icon: 'iconnaozhong',
						title: '闹钟'
					},
					{
						icon: 'iconshouxieqianpi',
						title: '手写签批'
					},
				],
				editorCtx: null, // 富文本上下文
				formats: {},
				noteText: '', // 内容

				isOpen: false, // 手/笔开关
				isDraw: false, // 画布开关

				isUtil: false, // 切换修改和保存的状态
				subNVue: '', //弹框对象
				courseKey: '', //课程key
				textcontent: '',
				type: 1, //1创建，2回答，2回复
				questionId: '', //一级的问题id
				answerId: '', //二级问题id
				answersPhoto: '', //被回复人头像
				answersUser: '', //被回复人id
				answersName: '' //被回复人姓名
			}
		},
		onLoad(e) {
			this.courseKey = e.courseKey;
			var type = e.type;
			if (type) {
				this.type = type;
			}
			var title = "";
			switch (Number(this.type)) {
				case 1:
					title = "创建问题"
					break;
				case 2:
					title = "回答问题"
					this.questionId = e.questionId;
					break;
				case 3:
					title = "继续回答"
					this.answerId = e.answerId;
					this.answersPhoto = e.answersPhoto;
					this.answersUser = e.answersUser;
					this.answersName = e.answersName;
					break;
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		onShow() {},

		// 原生导航栏 修改/保存事件
		onNavigationBarButtonTap(e) {
			// #ifdef APP-PLUS | MP-WEIXIN
			// 获取webview对象
			// var webView = this.$mp.page.$getAppWebview();
			// let title = this.isUtil ? '修改' : '保存'
			// 改变导航栏内容状态
			// webView.setTitleNViewButtonStyle(0, {
			// 	text: title,
			// })
			// if (this.isUtil) {
			// 获取富文本内容，并进行保存
			this.editorCtx.getContents({
				success: res => {
					this.textcontent = res.text;
					this.textcontent = this.textcontent.replace(/[\r\n]/g, "");
					this.textcontent = this.textcontent.replace(/\ +/g, "");
					if (this.textcontent == '') {
						uni.showToast({
							title: '请输入问题',
							icon: 'none'
						});
					} else {
						//显示确认框
						this.show();
					}

				}
			})

			// }
			// #endif
			// this.isUtil = !this.isUtil


		},
		methods: {
			show: function() {
				var _this = this;
				//#ifdef APP-PLUS
				const subNVue = uni.getSubNVueById('notepopup')
				// 弹出确认框
				subNVue.show('none', 300, function() {});
				//收到确认提交
				subNVue.onMessage(function(data) {
					if (data.data.submint) {
						_this.reply();
					}
				})
				//#endif
			},

			reply: function() {
				var _this = this;
				switch (Number(this.type)) {
					case 1:
						var userInfo = uni.getStorageSync('student_info');
						var Data = {
							userId: userInfo.id,
							userName: userInfo.nicheng,
							userType: 1,
							headPhoto: userInfo.avatar,
							courseKey: _this.courseKey,
							questionContent: _this.textcontent,
							reqMethod: 2
						};
						_this.$capi.apiPost('question/insertQuestion', Data).then(res => {
							if (res.data.code == 200) {
								_this.$emit('new_note', {});
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
						break;
					case 2:
						var userInfo = uni.getStorageSync('student_info');
						var Data = {
							auserId: userInfo.id,
							auserName: userInfo.nicheng,
							auserType: 1,
							aheadPhoto: userInfo.avatar,
							courseKey: _this.courseKey,
							answerContent: _this.textcontent,
							questionId: _this.questionId,
							reqMethod: 2
						};
						_this.$capi.apiPost('answer/insertAnswer', Data).then(res => {
							if (res.data.code == 200) {
								_this.$emit('newessay', {});
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
						break;
					case 3:
						var userInfo = uni.getStorageSync('student_info');
						var Data = {
							reqMethod: 2,
							answerId: _this.answerId,
							userId: userInfo.id,
							userName: userInfo.nicheng,
							headPhoto: userInfo.avatar,
							answersUser: _this.answersUser,
							answersName: _this.answersName,
							answersPhoto: _this.answersPhoto,
							answersContent: _this.textcontent,
							userType: 1,
							courseKey: _this.courseKey,
						};
						_this.$capi.apiPost('answers/insertAnswers', Data).then(res => {
							if (res.data.code == 200) {
								_this.$emit('newessay', {});
								uni.navigateBack({
									delta: 2
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
						break;
				}

			},
			// 初始化富文本
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					// 解析富文本并渲染
					// this.editorCtx.setContents({
					// 	delta: JSON.parse(this.detailData.noteText)
					// })
				}).exec()
			},
			// 撤销
			undo() {
				this.editorCtx.undo()
			},
			// 恢复
			redo() {
				this.editorCtx.redo()
			},
			// 修改样式
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				this.editorCtx.format(name, value)
			},
			// 清除当前所选
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			// 选择图片
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			// 启动/隐藏手/笔
			clickOpen() {
				this.isOpen = !this.isOpen
			},
			// 手笔选择事件
			changeOpen(title) {
				if (title === 'hand') { // 点击了手
					this.isDraw = true // 启动画布
					this.isOpen = false // 关闭手笔两个按钮
				}
				if (title === 'pen') { // 点击了笔
					uni.showToast({
						title: '暂未开通~',
						icon: 'none'
					})
				}
			},

			// 画布点击事件
			clickDraw(title) {
				if (title === 'save') {
					// 保存后开始插入图片，并且隐藏画布
					this.isDraw = false
					this.editorCtx.insertImage({
						src: uni.getStorageSync('imgbase'),
						alt: '图像',
						success: function() {
							console.log('insert image success')
						}
					})
				} else if (title === 'close') {
					this.isDraw = false
				}
			}
		}
	}
</script>

<style lang="scss">
	// 输入标题
	.cs-detl-tc {
		padding: 20upx 30upx;
		background: #FFFFFF;
	}

	.tc-input {
		font-size: 34upx;
		color: #333333;
	}

	// 富文本
	.cs-detl-editor-x {
		padding-bottom: 100upx;
	}

	.toolbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: space-around;
		z-index: 1;
		text-align: center;
		font-size: 32upx;
		color: #666666;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.16);
		background: #FFFFFF;
	}

	.ql-container {
		padding: 0 20upx;
		height: calc(100% - 200upx);
	}

	// 图标
	.icon_caozuo {
		color: #000000;
		font-size: 50upx;
	}
</style>
